<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/echarts.js"></script>
    <style>
        div {
            height : 700px;
            width : 1000px;
            margin : auto auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script>
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        legend:{
            right:0,
            data:[
            {
                name:'minMeanWages',
                lineStyle: {
                  type: "dotted"
                },
            },
            {
                name:'maxMeanWages',
                lineStyle: {
                  type: "dotted"
                },
            }
            ]
        },
        xAxis:{
            data:[
                {% for dic in data %}
                    '{{ dic.name }}',
                {% endfor %}
            ]
        },
        yAxis:{},
        series:[
            {
                name:'demand',
                type:'bar',
                data:[
                {% for dic in data %}
                    {{dic.demand}},
                {% endfor %}
                ]
            },
            {
                name:'minMeanWages',
                type:'line',
                data:[
                    {% for dic in data %}
                    {{ dic.minMeanWages }},
                    {% endfor %}
                ]
            },
            {
                name:'maxMeanWages',
                type:'line',
                data:[
                    {% for dic in data %}
                    {{ dic.maxMeanWages }},
                    {% endfor %}
                ]
            }
        ]
    };
    myChart.setOption(option)
</script>
</body>
</html>